<template>
  <div class="pages-container">
    <Main-Header />
    <!-- <Tutorial /> -->
    <div class="index-page">
      <el-carousel :interval="4000" class="slide-box" :autoplay="false">
        <el-carousel-item v-for="(item,index) in slide_list" :key="index">
          <div class="slide-item">
            <img :src="item.imgUrl" :alt="item.title" srcset="">
            <p>{{item.title}}</p>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="warpper">
        <div class="programme">
          <h3>充电解决方案</h3>
          <p>多场景一站式充电解决方案</p>
        </div>
      </div>
      <div class="warpper">
        <el-row :gutter="20">
          <el-col v-for="o in productList" :key="o.schedular_id" :span="8" style="margin-top:20px;">
            <el-card :body-style="{ padding: '0px' }">
              <img :src="o.imgUrl" class="o-item-image">
              <div style="padding: 14px;">
                <div class="o-item-title">{{o.title}}</div>
                <div v-html="o.doc" class="doc"></div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
    <Main-Footer />
  </div>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      slide_list: [],
      productList: [],
    };
  },
  created() {
    this.asyncData();
  },
  methods: {
    asyncData() {
      this.$axios.get(`/nuxtApiIndex.json`).then((res) => {
        const { banner , news} = res.data.data
        this.slide_list = banner
        this.productList = news
      });
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-carousel__container{
  height: calc(100vh - 60px) !important;
}
.index-page{
  .slide-item{
    position: relative;
    img{
      display: block;
    }
    p{
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      font-size: 28px;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
    }
  }
  .programme{
    padding: 30px 0;
    h3,p{
      text-align: center;
      color: #999;
    }
    h3{
      padding: 8px 0;
      letter-spacing: 5px;
      font-size: 26px;
      color: #000;
    }
  }
  .o-item-image{
    max-width: 100%;
  }
  .doc{ font-size: 13px; color: #666;}
  .o-item-title{
    display: -webkit-box;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}
</style>
